<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>7.Bootstrap按钮</title>

    <link rel="stylesheet" href="../css/bootstrap.css"/>

    <script src="../js/jquery-1.11.1.min.js"></script>
    <script src="../js/bootstrap.js"></script>
</head>
<body>
    <div class="container">
        <p>
        <input type="button" value="正常的按钮" class="btn"/>
        <input type="button" value="success的按钮" class="btn btn-success"/>
        <input type="button" value="info的按钮" class="btn btn-info"/>
        <input type="button" value="warning的按钮" class="btn btn-warning"/>
        <input type="button" value="danger的按钮" class="btn btn-danger"/>

        <!-- 按钮变成超链接 -->
        <input type="button" value="按钮的超链接" class="btn btn-link"/>
        <!-- 超链接变成按钮 -->
        <a href="#" class="btn btn-info">超链接的按钮</a>
        </p>

        <p>
            <!-- 大 -->
            <input type="button" value="success的按钮" class="btn btn-success btn-lg"/>
            <input type="button" value="info的按钮" class="btn btn-info btn-lg"/>
        </p>
        <p>
            <!-- 小 -->
            <input type="button" value="success的按钮" class="btn btn-success btn-sm"/>
            <input type="button" value="info的按钮" class="btn btn-info btn-sm"/>
        </p>
        <p>
            <!-- 更小 -->
            <input type="button" value="success的按钮" class="btn btn-success btn-xs"/>
            <input type="button" value="info的按钮" class="btn btn-info btn-xs"/>
        </p>

        <input type="button" value="success的按钮" class="btn btn-success btn-block"/>
        <input type="button" value="info的按钮" class="btn btn-info btn-block"/>

        <p>
            <!--  激活状态 -->
            <input type="button" value="success的按钮" class="btn btn-success active"/>
            <input type="button" value="info的按钮" class="btn btn-info active"/>
        </p>

        <p>
            <!--  禁用状态 -->
            <input type="button" value="success的按钮" class="btn btn-success" disabled/>
            <input type="button" value="info的按钮" class="btn btn-info" disabled/>
        </p>
    </div>
</body>
</html>